<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    //   1.Echarts 最基本 的代码结构
    //   2.定义各个维度的最大值
    //   indicator: [ { name: '易用性', max: 100 }, .... ]各个维度最大值都是100
    //   3.准备具体产品的数据
    //  华为手机1 易用性 80、功能 90、拍照 80、跑分 82、续航 90
    //  中兴手机1 易用性 70、功能82、拍照 75、跑分 70、续航 78
    //   4.在 series 下设置 type: radar
    var mCharts = echarts.init(document.querySelector('div'))
    // 各个维度的最大值
    var dataMax = [
      { name: '易用性', max: 100 },
      { name: '功能', max: 100 },
      { name: '拍照', max: 100 },
      { name: '跑分', max: 100 },
      { name: '续航', max: 100 },
    ]
    var option = {
      radar: { 
        indicator: dataMax,// 配置各个维度的最大值
        shape: 'circle', // 配置雷达图最外层的图形 polygen circle
      },
      series: [
        {
          type: 'radar', // radar 此图表是一个雷达图
          label: { // 设置标签的样式
            show: true // 显示数值
          },
          areaStyle: {}, // 将每一个产品的雷达图形成阴影面积
          data: [
            { name: '华为手机1', value: [80, 90, 80, 82, 90] },
            { name: '中兴手机1', value: [70, 82, 75, 70, 78] },
          ]
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>